<template>
  <div class="ticket-card">
    <div class="card-header"></div>
    <div class="card-body"></div>
    <div class="right-hole"></div>
  </div>
</template>

<style scoped>
.ticket-card {
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden; /* 关键，保证挖空后不超出 */
  /* background: #ff5858; */
  /* border-radius: 12px; */
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
}

/* 中间分割线 */
.ticket-card::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  /* top: 0.75rem; */
  top: 70%;
  border-top: 0.03rem dashed #e4e8ec;
  /* background: #ff5858; */
}

/* 左边挖掉半圆 */
.ticket-card::after {
  content: "";
  position: absolute;
  top: calc(60% - 0.2rem);
  left: -0.32rem;
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  background: #f5f6f7; /* 外层背景色 */
  /* box-shadow: inset 0 0 0 999px #f5f6f7;  */
}

/* 右边半圆 */
.ticket-card .right-hole {
  content: "";
  position: absolute;
  right: -0.32rem;
  top: calc(60% - 0.2rem);
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  background: #f5f6f7;
}

.card-header {
  height: 0.2rem;
  /* padding: 0.2rem; */
  font-weight: bold;
  text-align: center;
  /* background: #ff5858; */
}

.card-body {
  height: 0.8rem;
  /* padding: 0.4rem; */
  /* background: #ff5858; */
}
</style>
